<template>
	 <div class="deliveryWay">
		<ul class="del-list">
			<li class="item clearfix"><a href="javascript:;" @click="back"><img src="../assets/image/ico_car@2x.png" class="list-icon fl"/><p class="fl">快递</p><img src="../assets/image/ico_leave-for@2x.png" class="list-to fr"/><p class="fr">包邮</p></a></li>
			<li class="item clearfix" @click="since = !since"><img src="../assets/image/ico_Shop@2x.png" class="list-icon fl"/><p class="fl">门店自提</p><img src="../assets/image/ico_leave-for@2x.png" class="list-to fr" v-if="since == false"/><img src="../assets/image/ico_leave-down@2x.png" class="list-to fr"v-if="since == true"/></li>
		</ul>
		<ul class="toshop-msg" v-show="since">
			<li class="consignee-name"><p class="title">提货人姓名</p><input type="text" placeholder="输入您的姓名" v-model="deliveryName"/><p class="name-tips">此栏位必须填写</p></li>
			<li class="consignee-phonenum"><p class="title">手机号码</p><input type="text" placeholder="输入您的手机号码" v-model="deliveryMobile" maxlength="11"/></li>
			<li class="consignee-time"><p class="title">自提时间</p><div class="consignee-select clearfix" @click="timeList"><p class="selectbar fl">{{timing ? timing : "请选择"}}</p><img src="../assets/image/ico_leave-down@2x.png" class="fl"/></div></li>
			<li class="consignee-add">
				<p class="title">自提地点</p>
				<div class="consignee-select clearfix" v-show="!storeFlag"><a @click="storeFlag = true"><p class="selectbar fl">查看地图</p><img src="../assets/image/ico_leave-down@2x.png" class="fl"/></a></div>
				<div class="detailed-info" v-show="storeFlag">
					<div class="consignee-shop clearfix"><p class="brand-name fl">{{storeName}}</p><router-link :to="{path:'map', params:{lng:this.lng,lat:this.lat,cusPhone: this.cusPhone,storeName:this.storeName}}"><img src="../assets/image/ico_leave-down@2x.png" class="fr"/><p class="selectbar fr">查看地图</p></router-link></div>
					<p class="clearfix"><span>距收货地址:</span><span>5.16km</span></p>
					<p class="clearfix"><span>地址:</span><span class="add-details">{{address}}</span></p>
					<p>营业时间：</p>
					<p class="clearfix"><span>周一，</span><span>周二，</span><span>周三，</span><span>周四</span><span>(10:00~22:00);</span></p>
					<p class="clearfix"><span>周五，</span><span>周六，</span><span>周日</span><span>(10:00~23:00);</span></p>
				</div>
			</li>
		</ul>
		<!--预约-->
		<a class="appointment" @click="appointment">预约</a>
		<!--时间弹窗-->
		<div class="popup" v-show="timeListFlag">
			<div class="time_content">
				<div class="time_title">选择自提时间</div>
				<form class="time_list">
          <label v-for="(item,index) in dateList"><input type="radio" name="dateSelect" :value="item.year+'年'+item.month+'月'+item.date+'日'+item.weekday" v-model="timing"><span>{{item.month}}月{{item.date}}日（{{item.weekday}})</span></label>
				</form>
				<a class="time_yes" @click="timeListFlag = false">确定</a>
				<div class="time_close" @click="timeListFlag = false"></div>
			</div>
		</div>
	</div>
</template>
<script>
	import Vue from 'vue'

	export default {
		data () {
			return {
        storeId:'',
        cusPhone:'',
        storeName:'',
        address:'',
        lng:lng,
        lat:lat,
        since:false,
        deliveryName:'',
        deliveryMobile:'',
				timeListFlag:false,
        dateList:[],
        timing:'',
        storeFlag:false
			}
		},
    created(){
      this.storeId=this.$route.query.storeId;
      this.storeName=this.$route.query.storeName;
      this.cusPhone=this.$route.query.storePhoneNum;
      this.address=this.$route.query.address;
    },
    watch : {
      deliveryMobile () {
        this.deliveryMobile = this.deliveryMobile.replace(/[^\d]/g, '');
      }
    },
		name: 'app',
		methods:{
      timeList:function () {
        var _this = this;
        this.timeListFlag = true;
        var weekday=new Array(7);
        weekday[0]="星期日";
        weekday[1]="星期一";
        weekday[2]="星期二";
        weekday[3]="星期三";
        weekday[4]="星期四";
        weekday[5]="星期五";
        weekday[6]="星期六";
        this.dateList = [];
        for(var i=1;i<8;i++){
          var myDate=new Date();
          myDate.setDate(myDate.getDate()+i);
          let year = myDate.getFullYear();
          let month = myDate.getMonth()+1;
          let date = myDate.getDate();
          let week =weekday[myDate.getDay()];
          let dateContent ={};
          dateContent = {"year":year,"month":month,"date":date,"weekday":week};
          _this.dateList.push(dateContent);
        }
      },

      back: function () {
        var deliverMsg = JSON.parse(Util.ajaxPath.getCookie("deliverMsg") || '{}');
        deliverMsg["storeId_"+this.storeId] = {type:'快递包邮'};
        Util.ajaxPath.setCookie("deliverMsg",JSON.stringify(deliverMsg));
        this.$router.push('confirmOrder');
      },

      appointment:function () {
          var _this = this;
        if(_this.deliveryName && _this.deliveryMobile && _this.timing  != ''|| null || undefined){
          const phoneReg = /^1[3|4|5|7|8]{1}\d{9}/;
          const type = 'register';
          if(!phoneReg.test(_this.deliveryMobile)) {
            alert("请输入正确手机号码");
            return;
          }else {
            var deliverMsg = JSON.parse(Util.ajaxPath.getCookie("deliverMsg") || '{}');
            deliverMsg["storeId_"+this.storeId] = {"type":'门店自提', id: this.storeId, "deliveryName":this.deliveryName,"deliveryMobile":this.deliveryMobile,"timing":this.timing};
            Util.ajaxPath.setCookie("deliverMsg",JSON.stringify(deliverMsg));
            this.$router.push('confirmOrder');
          }
        }else {
          if(_this.deliveryName == ''){
            alert("请输入提货人姓名");
          }else if(_this.deliveryMobile == ''){
            alert("请输入手机号码");
          }else if(_this.timing == ''){
            alert("请选择提货时间");
          }
        }


      }
		}
	}
</script>
<style lang="scss">
.deliveryWay{
	.del-header{
		width: 100%;
		height: 0.88rem;
		position: fixed;
		left: 0;
		top: 0;
		border-bottom: 2px #f4f5f5 solid;
		background:#fff;
		.del-title{ width: 100%; height: 0.88rem; font-size:0.36rem; line-height: 0.88rem; text-align:center; color: #2e2e2e;}
		.back-icon{ width: 0.44rem; height: 0.44rem; position: absolute; left: 0.3rem; top: 0.22rem;}
	}
	// 占位
	.placeholder{ height: 0.9rem; }
	.del-list{
		background:#fff;
	   li{
		   width: 100%;
		   height: 1rem;
		   +li{ border-top: 0.04rem solid #f4f5f5;}
		   a{ display:block; height:1rem; }
		   .list-icon{ width: 0.28rem; height: 0.28rem; padding: 0.36rem 0.17rem 0 0.3rem;}
		   p{ height:1rem; font-size: 0.28rem; line-height: 1rem; color: #333333;}
		   .list-to{ width:0.3rem; height: 0.3rem; padding: 0.35rem 0.3rem 0 0.15rem;}


	   }
	}
	.toshop-msg{
		padding: 0 0.3rem;
		border-top: 0.04rem solid #f4f5f5;
		background:#fff;
		li{
			+li{ border-top: 1px solid #ddd;}
			.title{
				height: 0.24rem;
				padding: 0.3rem 0 0.29rem 0;
				font-size: 0.24rem;
				line-height: 0.24rem;
				text-align: left;
			}
			input{
				display: block;
				margin-bottom: 0.3rem;
				height: 0.28rem;
				font-size: 0.28rem;
				line-height: 0.28rem;
				text-align: left;
				border: 0;
				color:#333;
				outline:none;
			::-webkit-input-placeholder {
				color: #151517;
				font-size: 0.28rem;
				text-align: left;
				 }
			}
			.name-tips{
				height: 0.28rem;
				padding-bottom: 0.3rem;
				font-size: 0.28rem;
				line-height: 0.28rem;
				text-align: left;
				color: #ff365d;
			}
			.consignee-select{
				height: 0.3rem;
				padding-bottom:0.28rem;
				a{ display: block; height: 0.3rem;}
				.selectbar{
					height: 0.3rem;
					font-size: 0.28rem;
					line-height: 0.3rem;
					color: #333;
				}
				img{
					width: 0.3rem;
					height: 0.3rem;
					padding-left: 0.1rem;
				}
			}
			.detailed-info{
				.consignee-shop{
					height: 0.3rem;
					padding-bottom:0.28rem;
					a{ display: block; height: 0.3rem;}
					.brand-name{
						height: 0.28rem;
						font-size: 0.28rem;
						line-height: 0.28rem;
						color: #333;
						span{ height: 0.28rem; font-size: 0.28rem; line-height: 0.28rem; text-indent: 0.3rem;  color: #333;}
					}
					.selectbar{
						height: 0.3rem;
						font-size: 0.28rem;
						line-height: 0.3rem;
						color: #333;
					}
					img{
						width: 0.3rem;
						height: 0.3rem;
						padding-left: 0.1rem;
					}
				}
				>p{
					height: 0.24rem;
					padding-bottom: 0.29rem;
					font-size: 0.24rem;
					line-height: 0.24rem;
					text-align: left;
					color: #999;

				span{
					display: block;
					float: left;
					height: 0.24rem;
					padding-right: 0.2rem;
					font-size: 0.24rem;
					line-height: 0.24rem;
					text-align: left;
					color: #999;
					overflow: hidden;
					text-overflow:ellipsis;
					white-space: nowrap;
				}
				.add-details{ width: 80%;}
				}
			}
		}

	}
	// 预约
	.appointment{ width: 100%; height: 0.98rem; line-height: 0.98rem; text-align: center; font-size: 0.26rem; color: #fefefe; background: linear-gradient(to right,#fe4a6b,#e8163f); position: fixed; left: 0; bottom: 0; z-index: 19; }
	// 弹窗
	.popup{ width: 100%; height: 100%; background: rgba(0,0,0,.2); position: fixed; left: 0; top: 0; z-index: 20; }
	// 时间弹窗
	.time_content{ width: 100%; background: #fff; position: fixed; left: 0; bottom: 0; z-index: 21; }
	.time_title{ padding-left: 0.3rem; height: 0.88rem; line-height: 0.88rem; font-size: 0.26rem; color: #585757; }
	.time_list{
		padding: 0 0.3rem;
		label{
      display: block; height: 0.88rem; line-height: 0.88rem; font-size: 0.24rem; color: #3f3f3f; border-top: 1px solid #eee;
      input{opacity: 0; position: absolute; z-index: -1;}
      input[type="radio"]+span{   display: block; height: 0.88rem; line-height: 0.88rem; font-size: 0.24rem; color: #3f3f3f; }
      input[type="radio"]:checked+span {color: #FF365D;}
    }
	}
	.time_yes{display: block; height: 0.98rem; line-height: 0.98rem; text-align: center; font-size: 0.26rem; color: #fefefe; background: linear-gradient(to right,#fe4a6b,#e8163f); }
	.time_close{ width: 0.44rem; height: 0.44rem; background: url(../assets/image/close@2x.png) no-repeat; background-size: 100% 100%; position: absolute; right: 0.2rem; top: 0.22rem; z-index: 22; }
}
</style>
